{% extends "buyer/base.html" %}

{% block title %}
    购物车
{% endblock %}

{% block content %}
    <div class="col-sm-12">
        <table class="table row">
            <caption>全部商品<span class="text-danger total_count">2</span>件</caption>
            <thead>
            <tr>
                <td class="col-lg-1"></td>
                <td class="col-lg-2">商品名称</td>
                <td class="col-lg-2">商品单位</td>
                <td class="col-lg-2">商品价格</td>
                <td class="col-lg-2">数量</td>
                <td class="col-lg-2">小计</td>
                <td class="col-lg-1">操作</td>
            </tr>
            </thead>
            <tbody>
            {% for c in car_list %}
                <tr>
                    <td><input type="checkbox" checked></td>
                    <td>
                        <span class="center-block">{{ c.goods_id.goods_name }}</span>
                        <img src="/static/{{ c.goods_id.picture }}" class="width_100 height_100 border_1">
                    </td>
                    <td>500g</td>
                    <td>{{ c.goods_id.goods_price }}元</td>

                    <td>
                        <div class="input-group width_100">

                            <span class="input-group-btn">
                                <button class="btn btn-default add" type="button">+
                                    <input type="hidden" value="{{ c.id }}" id="shopping_cart_id">
                                </button>
                            </span>

                                <input type="text" class="form-control text-center count" name="search"
                                       value="{{ c.goods_number }}"
                                       style="width: 50px">

                            <span class="input-group-btn">
                                <button class="btn btn-default minus" type="button">-
                                    <input type="hidden" value="{{ c.id }}" id="shopping_cart_id">
                                </button>
                            </span>
                        </div>
                    </td>

{#                    <td>{{ c.c_goods_number }}</td>#}
                    <td>{{ c.goods_id.goods_price }}元</td>
                    <td>
                        <a href="#">删除</a>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
            <tfoot>
            <tr>
                <td><input type="checkbox" checked></td>
                <td>全选</td>
                <td colspan="4" class="text-right">
                    <span class="center-block">合计(不含运费)：¥<span class="text-danger total_price">{{ total_price }}</span></span>
                    <span class="center-block">共计<span class="text-danger total_count" data-model-name="sum">{{ sum }}</span>件商品</span>
                </td>
                <td>
                    <a href="/buyer/place_order/" class="btn btn-danger">去结算</a>
                </td>
            </tr>

            </tfoot>
        </table>
    </div>
{% endblock %}

<script type="text/javascript">
    {#计算被选中的商品的价格#}
    function total_price_count() {
        total_count = 0;
        total_price = 0;
        $("tbody").find(":checked").parents('tr').each(function () {
            {#获取商品的数目和小计#}
            count = $(this).children('td').eq(4).find('input').eq(1).val();
            amount = $(this).children("td").eq(5).text();
            // 累加计算商品的总数和总价
            count = parseInt(count);
            amount = parseInt(amount);
            total_count += count;
            total_price += amount;
        });
        // 设置被选中的商品的总数和总价
        $('.total_price').text(total_price.toFixed(2));
        $('total_count').text(total_count)
    }

    {#商品的全选和全不选#}
    $('tfoot').find(':checkbox').change(function () {
        // 获取全选的checkbox的状态
        is_checked = $(this).prop("checked");
        {#获取全选的对应的checkbox，设置这些的选中的状态和全选按钮的一致#}
        $('tbody').find(":checkbox").each(function () {
            $(this).prop('checked', is_checked)
        });
        // 更新页面的信息
        total_price_count()
    });

    {#购物车商品数量的增加#}
    $(".add").click(function () {
        alert(111);
        // 获取商品的单价和商品的数量
        price = parseFloat($(this).parents('td').prev().text());
        count = parseInt($(this).parents().next().val());
        // 计算
        count ++;
        // 重新计算商品的数量
        $(this).parent().next().val(count);
        // 重新计算商品小计
        amount = count * price;
        $(this).parents("id").next().text(amount.toFixed(2) + "元");
        // 获取商品对应的checkbox的选中状态，如果被选中，更新页面信息
        is_checked = $(this).parents("tr").find(":checkbox").prop("checked");
        console.log(count, amount);
        if(is_checked){
            var cart_id = $(this).children().val();
            $.ajax({
                url: '/buyer/change_car_num/',
                type: 'get',
                data: {
                    'cart_id': cart_id,
                    'count': count,
                    'amount': amount
                },
                success: function (result) {
                    console.log('success');
                },
                error: function (result) {
                    console.log('error')
                }
            });
            // 更新页面信息
            total_price_count()
        }

    });

    {#购物车商品数量的减少#}
    $('.minus').click(function () {
        // 获取商品的单价和商品的数量
        price = parseFloat($(this).parents('td').prev().next());
        count = parseInt($(this).parents().prev().val());
        //校验参数
        count = parseInt(count) - 1;
        if (count <= 0){
            return
        }
        // 重新设置商品的数目
        $(this).parents().prev().val(count);
        // 重新计算商品小计
        amount = count *price;
        $(this).parents('td').next().text(amount.toFixed(2) + "元");
        // 获取商品对应的checkbox的选中状态，如果被选中，更新页面信息
        is_checked = $(this).parents("tr").find(":checkbox").prop("checked");
        console.log(count,amount);
        if(is_checked){
            var cart_id = $(this).children().val();
            $.ajax({
                url: 'buyer/change_car_num/',
                type: 'get',
                data: {
                    "cart_id": cart_id,
                    "count": count,
                    "amount": amount
                },
                success: function (result) {
                    console.log('success');
                },
                error: function (result) {
                    console.log("error");
                }
            });
            // 更新页面
            total_price_count()
        }
    });

    {#手动修改购买数量#}
    $(".count").keydown(function (e) {
        code = e.keyCode;
        if(!((code >= 48  && code <=57) || code == 8 || code == 46)){
            return false
        }
    });
    $(".count").blur(function (e) {
        // 获取商品的单价和商品的数量
        price = parseFloat($(this).parents("td").prev().text());
        count = parseInt($(this).val());
        // 重新计算商品小计
        amount = count * price;
        $(this).parents("td").next().text(amount.toFixed(2) + "元");
        // 获取checkbox的选中状态，如果被选中，更新页面信息
        is_checked = $(this).parents("tr").find(":checkbox").prop("checked");
        if(is_checked){
            // 更新页面信息
            total_price_count()
        }
    });

    // 更新显示
    total_price_count()

</script>


